<template>
	<view style="padding-bottom: 200rpx;">
		<!-- 商品信息-start -->
		<view class="card">
			<view class="f-bt">
				<view class="f30 wei">{{goodsTypes.typeNum}}种商品，共<text style="color: #49C265;">{{goodsTypes.total}}</text>件</view>
			</view>
			<view v-for="(item,index) in result.goodsArr" :key="index" class="flex m20">
				<view style="width: 500rpx;">
					<!-- <image style="width: 60rpx;height: 60rpx;margin-right: 10rpx;" src="../../../static/no.png" mode=""></image> -->
					<text class="v-l-t">{{item.name}}</text>
				</view>
				<text style="width: 50rpx;">x{{item.num}}</text>
				<text class="t-r" style="width: 150rpx;">￥{{item.sumMoney}}</text>
			</view>
			<!-- 包装费-start -->
			<view class="top-line f-bt">
				<block v-if="result.orderMode == 1">
					<text>桌位费</text>
					<text>￥{{result.tablewareMoney}}</text>
				</block>
				<block v-else-if="result.orderMode == 2">
					<text>包装费</text>
					<text>￥{{result.tablewareMoney}}</text>
				</block>
				
			</view>
			<!-- 包装费-end -->
			<view class="top-line f-x-e">
				<!-- <text class="cf p-5-10 bf1">未支付</text> -->
				<view class="flex">
					<text>小计：</text>
					<text>￥<text class="">{{result.originMoney}}</text></text>
				</view>
			</view>
			<view class="top-line f-x-e">
				<!-- <text class="cf p-5-10 bf1">未支付</text> -->
				<view class="flex">
					<text>优惠：</text>
					<text>￥<text class="">{{result.allPreferential}}</text></text>
				</view>
			</view>
			<view class="top-line f-bt">
				<view class="t-l">
					<text v-if="result.payAtTime === '0'" class="cf p-5-10" style="background: #F56C6C;">未支付</text>
					<text v-else class="cf p-5-10" style="background: #49C265;">已支付</text>
				</view>
				<view class="t-r">
					<text>实付金额：</text>
					<text>￥<text class="wei">{{result.money}}</text></text>
				</view>
			</view>
		</view>
		<!-- 商品信息-end -->
		<view class="card">
			<view class="f30 wei">用户信息</view>
			<mg-cell cname="p10" last="1" bgc="transparent" color="#000000" btt="用户昵称" bttc="f28" :ft="result.userName || '--'" ftc="f28" />
			<mg-cell cname="p10" last="1" bgc="transparent" color="#000000" btt="手机号" bttc="f28" :ft="result.userTel  || '--'" ftc="f28" />
		</view>
		<!-- 订单状态-start -->
		<view class="card">
			<view class="f30 wei">订单信息</view>
			<mg-cell cname="p10" last="1" bgc="transparent" color="#000000" btt="订单来源" bttc="f28" :ft="stateInfo.origin" ftc="f28" />
			<block v-if="result.orderMode == 1">
				<mg-cell cname="p10" last="1" bgc="transparent" color="#000000" btt="桌台区域" bttc="f28" :ft="`${result.regionName}-${result.typeName}-${result.number}`" ftc="f28" />
				<mg-cell cname="p10" last="1" bgc="transparent" color="#000000" btt="开台时间" bttc="f28" :ft="result.createdAt" ftc="f28" />
				<mg-cell cname="p10" last="1" bgc="transparent" color="#000000" btt="就餐人数" bttc="f28" :ft="`${result.people}(桌位费:￥${result.tablewareMoney})`" ftc="f28" />
			</block>
			<block v-else-if="result.orderMode == 2">
				<mg-cell cname="p10" last="1" bgc="transparent" color="#000000" btt="取单号" bttc="f28" :ft="result.callNo" ftc="f28" />
				<mg-cell cname="p10" last="1" bgc="transparent" color="#000000" btt="就餐方式" bttc="f28" :ft="stateInfo.isOut" ftc="f28" />
			</block>
			<mg-cell cname="p10" last="1" bgc="transparent" color="#000000" btt="订单号" bttc="f28" :ft="result.outTradeNo" ftc="f28" />
			<!-- <mg-cell cname="p10" last="1" bgc="transparent" color="#000000" btt="订单金额" bttc="f28" ft="62" ftc="f28" /> -->
			<!-- <mg-cell cname="p10" last="1" bgc="transparent" color="#000000" btt="订单优惠" bttc="f28" ft="2" ftc="f28" /> -->
			<mg-cell v-if="result.state == 7" cname="p10" last="1" bgc="transparent" color="red" btt="实付金额" bttc="f28" :ft="`${result.money}(已退款)`" ftc="f28" />
			<mg-cell v-else cname="p10" last="1" bgc="transparent" color="red" btt="实付金额" bttc="f28" :ft="result.money" ftc="f28" />
			<mg-cell v-if="result.payAtTime != '0'" cname="p10" last="1" bgc="transparent" color="#000000" btt="支付方式" bttc="f28" :ft="stateInfo.payMode" ftc="f28" />
			<block v-if="result.orderMode == 1">
				<mg-cell cname="p10" last="1" bgc="transparent" color="#000000" btt="就餐模式" bttc="f28" :ft="result.eatType == 1?'先结账后用餐':'先用餐后结账'" ftc="f28" />
			</block>
			<mg-cell cname="p10" last="1" bgc="transparent" color="#000000" btt="订单备注" bttc="f28" :ft="result.userNote" ftc="f28" />
		<!-- 	<mg-cell cname="p10" last="1" bgc="transparent" color="#000000" btt="订单备注" bttc="f28" ftc="f28" >
				<template slot="ft">
					<view class="edit-btn">编辑</view>
				</template>
			</mg-cell> -->
		</view>
		<!-- 订单状态-end -->
		<!-- 下单人-start -->
		<!-- <view class="card" style="margin-bottom: 200rpx;">
			<view class="">2021-07-01 15:06</view>
			<view class="">[估计是滴] 在助手使用代客下单提交</view>
		</view> -->
		<!-- 下单人-end -->
		
		<view class="f-x-ad pt20 fixed-btn">
			<block v-if="result.orderMode == 1">
				<view  style="background:#999;margin-right: -150rpx;" @click="changeOrder('print')">打印小票</view>
				<view  style="background:#49C265;" @click="changeOrder('')">结账并清台</view>
			</block>
			<block v-else-if="result.orderMode == 2">
				<view v-if="result.state != 2" style="background:#999;" @click="changeOrder('print')">打印小票</view>
				<view v-if="result.state == 2" style="background:#49C265;margin-right: -150rpx;" @click="changeOrder('receipt')">接单</view>
				<view v-if="result.state == 2" style="background:#F56C6C;" @click="changeOrder('rejection')">拒单并退款</view>
				<view v-if="result.state != 4 && result.state != 7 && result.state != 2" style="background:#E6A23C;" @click="changeOrder('call')">取餐并叫号</view>
				<view v-if="result.state != 4 && result.state != 7 && result.state != 2" style="background:#F56C6C;" @click="changeOrder('refund')">退款</view>
				<view v-if="result.state != 4 && result.state != 7 && result.state != 2" style="background:#67C23A;" @click="changeOrder('confirm')">完成</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				id:null,
				result:{
					goodsArr:[]
				}
			}
		},
		computed:{
			goodsTypes(){
				var result = {
					typeNum:0,
					total:0
				}
				this.result.goodsArr.forEach(item=>{
					result.total += (+item.num)
				})
				result.typeNum = +this.result.goodsArr.length
				return result
			},
			stateInfo(){
				var info = {
					origin:'', //订单来源
					isOut:'', //就餐方式
					payMode:'' //支付方式
				}
				// 1微信小程序,3支付宝,4百度,5收银台6商家小程序
				switch(this.result.origin){
					case '1':
						info.origin = '微信小程序'
					break;
					case '3':
						info.origin = '支付宝'
					break;
					case '4':
						info.origin = '百度'
					break;
					case '5':
						info.origin = '收银台'
					break;
					case '6':
						info.origin = '商家小程序'
					break;
				}
				// 1店内就餐2打包带走
				switch(this.result.isOut){
					case '1':
						info.isOut = '店内就餐'
					break;
					case '2':
						info.isOut = '打包带走'
					break;
				}
				 // 1微信支付2支付宝支付5.余额支付6线下结账7pos机 8自有微信9自有支付宝
				 switch(this.result.payMode){
				 	case '1':
				 		info.payMode = '微信支付'
				 	break;
				 	case '2':
				 		info.payMode = '支付宝支付'
				 	break;
					case '5':
						info.payMode = '余额支付'
					break;
					case '6':
						info.payMode = '现金支付'
					break;
					case '7':
						info.payMode = '7pos'
					break;
					case '8':
						info.payMode = '自有微信'
					break;
					case '9':
						info.payMode = '自有支付宝'
					break;
				 }
				return info
			}
		},
		onLoad(option) {
			this.id = option.id
			this.fetchData()
		},
		methods:{
			async fetchData(){
				let {data} = await this.util.request({
					'url': this.api.inStoreOrderInfo,
					method:"post",
					data:{id:this.id}
				})
				this.result = data
				
			},
			changeOrder(type){
				var text = ""
				var param = {
					orderId:this.id,
					type:type
				}
				switch(param.type){
					case 'call':
						text = '您确认要提醒用户取餐并叫号吗？'
						break;
					case 'confirm':
						text = '您确认要完成此订单吗？'
						break;
					case 'print':
						text = '您确认要打印小票吗？'
						break;
					case 'refund':
						text = '您确认要退款吗？'
						break;
					case 'receipt':
						text = '您确认要接单吗？'
						break;
					case 'rejection':
						text = '您确认要拒绝此订单吗？'
						break;
				}
				this.util.modal(text).then(async res=>{
					try{
						let {msg} = await this.util.request({
							'url': this.api.modifyFastOrder,
							method:"post",
							data:param
						})
						this.fetchData()
						this.util.message(msg, 3, 2000)
					}catch(e){
						this.util.message(e.msg, 3, 2000)
					}
					
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.card{
		width: 700rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		background: #FFF;
		margin-top: 20rpx;
		padding: 20rpx;
	}
	.btn{
		width: 170rpx;
		height: 60rpx;
		color: #F56C6C;
		text-align: center;
		line-height: 60rpx;
		border: 2rpx solid #F56C6C;
		border-radius: 60rpx;
	}
	.top-line{
		border-top: 2rpx dashed #f5f5f5;
		padding: 20rpx 0;
	}
	.tag{
		padding: 10rpx 20rpx;
		background: #FEF5E4;
		color: #E4AD56;
	}
	.edit-btn{
		width: 180rpx;
		height: 60rpx;
		color: #4A9C7E;
		line-height: 60rpx;
		text-align: center;
		border-radius: 60rpx;
		border: 1px solid #4A9C7E;
	}
	.fixed-btn{
		position: fixed;
		width: 750rpx;
		height: 120rpx;
		background: #FFF;
		bottom: 0;
	}
	.fixed-btn view{
		height: 60rpx;
		width: 160rpx;
		line-height: 50rpx;
		text-align: center;
		background: #666;
		color: #FFF;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		
	}
</style>
